var inData;
$(document).ready(
		function() {

			toggleNotebooks();

			var prjObjId = $("#prjObjId").val();
			var oppId=$("#opportunityId").val();
			
			$.getJSON('getCompleteOpportunity.htm?prjObjId=' + prjObjId + "&oppId=" + oppId,
					function(data) {
						inData = $.extend({}, data.opportunity, data.review);
						createOppStatusTable(data.oppStatus);
						$("#projectName").text(inData.title);
						$("#oppCurrentStatus").text("Current State : - " +data.oppCurrentStatus);
						// inData = data;
						loadDetails();
					});

		});

function showPanel(opt) {
	$("#reviewAccordion").accordion('select', opt-1);
	$("#reviewAccordion").accordion('getSelected', true);
}

function createOppStatusTable(statusData) {
	var htmlTbl = "<table class='blueTable'>";
	htmlTbl += '<tr><td>Assign Date</td><td>Role</td><td>User</td><td>Status</td><td>End Date</td><td>Outcome</td></tr>';
	var colNames = [ "startDate",  "role","userId", "status","endDate",
			"outcome" ];
	$.each(statusData, function(ind, obj) {
		htmlTbl += "<tr>";
		$.each(colNames, function(i, col) {
			if (obj.hasOwnProperty(col))
				htmlTbl += "<td>" + obj[col] + "</td>";
			else
				htmlTbl += "<td>&nbsp;</td>";
		});

		htmlTbl += "</tr>";
	});
	htmlTbl += "</table>";
	$("#oppStatus").html(htmlTbl);
}

function loadDetails() {
	$.each(inData, function(key, value) {
		try {
			if (jQuery.type(inData[key]) === "object") {
				$("#" + key).html(inData[key].value);
			} else {				
				$("#" + key).html(inData[key]);
			}
		} catch (e) {
		}
	});
	showPanel(1);
}

function toggleNotebooks() {
	$(".notebook span:first-child").each(function(ind, obj) {
		$(obj).addClass("collapse");
		$(obj).parent().parent().find("div").addClass("collapseNotebook");
	});

	$(".notebook span:first-child").click(
			function(obj) {
				if ($(obj.target).hasClass('expand')) {
					$(obj.target).removeClass('expand');
					$(obj.target).addClass('collapse');
					$(obj.target).parent().parent().find("div").eq(0)
							.removeClass("expandNotebook");
					$(obj.target).parent().parent().find("div").eq(0).addClass(
							"collapseNotebook");
				} else {
					$(obj.target).removeClass('collapse');
					$(obj.target).addClass('expand');
					$(obj.target).parent().parent().find("div").eq(0)
							.removeClass("collapseNotebook");
					$(obj.target).parent().parent().find("div").eq(0).addClass(
							"expandNotebook");
				}
			});
}

function createNotebookRow(title, id) {
	var content = "";
	if (inData.hasOwnProperty(id))
		content = inData[id];
	var row = "<tr><td class='notebook' colspan='2'><b><span>&nbsp;&nbsp;&nbsp;&nbsp;</span><span>"
			+ title + "</span></b>" + createDiv(id, content) + "</td></tr>";
	return row;
}
function createTextRow(title, id) {
	var content = "";
	if (inData.hasOwnProperty(id))
		content = inData[id];
	var row = "<tr><td><b>" + title + "</b></td><td>" + createSpan(id, content)
			+ "</td></tr>";
	return row;
}
function createObjectRow(title, id) {
	var content = "";
	if (inData.hasOwnProperty(id))
		content = inData[id];
	var row = "<tr><td><b>" + title + "</b></td><td>"
			+ createSpan(id, content.value) + "</td></tr>";
	return row;
}
function createDiv(divId, content) {
	content = (content === undefined ? "" : content);
	return "<div id='" + divId + "' >" + content + "</div>";
}
function createSpan(spanId, spanData) {
	content = (content === undefined ? "" : content);
	return "<Span id='" + spanId + "' style='width: 400px; height: 20px'>"
			+ spanData + "</Span>";
}